<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="card-item">
          <el-card>
            <div slot="header">
              <span><h3>学校人数</h3></span>
            </div>
            <div>
              注册人数 / {{ overviewData.count_user }} 人
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="card-item">
          <el-card>
            <div slot="header">
              <span><h3>生涯测评</h3></span>
            </div>
            <div>
              <el-table :data="overviewData.sy.data" border>
                <el-table-column label="年级" prop="grade_name" />
                <el-table-column label="班级" prop="class_name" />
                <el-table-column label="测评次数" prop="count" />
              </el-table>
              <div style="margin-top: 10px;">
                <el-pagination
                  :current-page="overviewData.sy.page"
                  :page-size="overviewData.sy.limit"
                  :total="overviewData.sy.total"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="card-item">
          <el-card>
            <div slot="header">
              <span><h3>选科选课</h3></span>
            </div>
            <div>
              <el-table :data="overviewData.xk.data" border>
                <el-table-column label="年级" prop="grade_name" />
                <el-table-column label="班级" prop="class_name" />
                <el-table-column label="测评次数" prop="count" />
              </el-table>
              <div style="margin-top: 10px;">
                <el-pagination
                  :current-page="overviewData.xk.page"
                  :page-size="overviewData.xk.limit"
                  :total="overviewData.xk.total"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getOverView } from '../api/statistics'

export default {
  data() {
    return {
      overviewData: {
        count_user: 0,
        sy: {
          data: [],
          page: 1,
          limit: 10,
          total: 0
        },
        xk: {
          data: [],
          limit: 10,
          page: 1,
          total: 0
        }
      }
    }
  },
  mounted() {
    this.getOverView()
  },
  methods: {
    handleSizeChange(size) {
      this.overviewData.sy.limit = size
      this.getOverView()
    },
    handleCurrentChange(page) {
      this.overviewData.sy.page = page
      this.getOverView()
    },
    handleXkSizeChange(size) {
      this.overviewData.xk.limit = size
      this.getOverView()
    },
    handleXkCurrentChange(page) {
      this.overviewData.xk.page = page
      this.getOverView()
    },
    getOverView() {
      getOverView({
        sy_limit: this.overviewData.sy.limit,
        xk_limit: this.overviewData.xk.limit,
        xk_page: this.overviewData.xk.page,
        sy_page: this.overviewData.sy.page
      }).then(res => {
        console.log(res)
        this.overviewData = res
      })
    }
  }
}
</script>

<style scoped>
.card-item {
  margin-bottom: 10px;
}
</style>
